<template>
  <section>
      <div class="filter-container">
            <el-select size="mini" v-model="listQuery.menuType" clearable placeholder="全部类型" class="w100 ml10" @change="handleFilter">
                <el-option
                        v-for="item in menu_type_list"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <common-input @keyup.enter.native="handleFilter" class="w200 ml10" placeholder="菜单名称" v-model="listQuery.keyword" />
            <el-select size="mini" v-model="listQuery.status" clearable placeholder="全部状态" class="w100 ml10">
                <el-option
                        v-for="item in status_list"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button size="mini" class="ml10" @click="handleCreate" type="primary" icon="el-icon-plus">新增</el-button>
        </div>
        <el-table
                :data="list"
                style="width: 100%">
            <el-table-column align="left" label="菜单名称">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="默认图片">
                <template slot-scope="scope">
                    <img v-if="scope.row.iconUrl" :src="scope.row.iconUrl | thumbnail" :data-origin="scope.row.iconUrl" class="img-thumbnail" width="60" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="选中图片">
                <template slot-scope="scope">
                    <img v-if="scope.row.iconSurl" :src="scope.row.iconSurl | thumbnail" :data-origin="scope.row.iconSurl" class="img-thumbnail" width="60" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="辅助图片">
                <template slot-scope="scope">
                    <img v-if="scope.row.iconHurl" :src="scope.row.iconHurl | thumbnail" :data-origin="scope.row.iconHurl" class="img-thumbnail" width="60" />
                </template>
            </el-table-column>
            <el-table-column align="left" label="菜单类型">
                <template slot-scope="scope">
                    <span>{{scope.row.menuTypeName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="排序">
                <template slot-scope="scope">
                    <span>{{scope.row.orderid}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <el-tag :type="getStatusColor(scope.row)">{{getStatusText(scope.row)}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-dropdown>
                        <el-button type="text">操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="handleUpdate(scope.row)">编辑</el-dropdown-item>
                            <el-dropdown-item @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[20,30, 50]" :page-size="listQuery.num" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="500px" @close="dialogClose">
            <el-form :model="form" :rules="rules" ref="form" label-width="150px">
                <el-form-item label="菜单名称" prop="name">
                    <common-input v-model="form.name" placeholder="请输入菜单名称" maxlength="10" />
                </el-form-item>
                <el-form-item label="菜单类型" prop="menuType">
                    <el-radio-group v-model="form.menuType">
                        <el-radio v-for="item in menu_type_list" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="默认图片" prop="iconUrl">
                    <pic-sel style="float:left" v-model="form.iconUrl" />
                </el-form-item>
                <el-form-item label="选中图片" prop="iconSurl">
                    <pic-sel style="float:left" v-model="form.iconSurl" />
                </el-form-item>
                <el-form-item label="辅助图片" prop="iconHurl">
                    <pic-sel style="float:left" v-model="form.iconHurl" />
                </el-form-item>
                <el-form-item label="字体颜色" prop="fontColor">
                    <common-input v-model="form.fontColor" placeholder="" maxlength="10" />
                </el-form-item>
                <el-form-item label="选中字体颜色" prop="fontColorAct">
                    <common-input v-model="form.fontColorAct" placeholder="" maxlength="10" />
                </el-form-item>
                <!-- <el-form-item label="跳转类型" prop="urlType">
                    <el-select size="mini" v-model="form.urlType" clearable>
                        <el-option
                                v-for="item in url_type_list"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <template v-if="form.urlType==4">
                    <el-form-item label="应用内部页面" prop="urlParam">
                        <el-select size="mini" v-model="form.urlParam" clearable>
                            <el-option
                                    v-for="item in url_param_list"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="其他页面" prop="url" v-if="form.urlParam=='other' || form.urlParam=='tb' || form.urlParam=='jd' || form.urlParam=='pdd3' || form.urlParam=='meituan' || form.urlParam=='wph' || form.urlParam=='haitao'">
                        <common-input v-model="form.url" placeholder="" />
                    </el-form-item>
                </template>
                <el-form-item label="跳转链接" prop="url" v-else>
                    <common-input v-model="form.url" placeholder="" />
                </el-form-item>
                <el-form-item label="IOS显示" prop="showIos" v-if="form.menuType==1">
                    <el-radio-group v-model="form.showIos">
                        <el-radio v-for="item in ios_list" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio v-for="item in status_list" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序" prop="orderid">
                    <common-input v-model="form.orderid" class="w60" maxlength="3" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancel('form')">取消</el-button>
                <el-button size="mini" v-if="dialogStatus=='create'" type="primary" @click="create('form')">确定</el-button>
                <el-button size="mini" v-else type="primary" @click="update('form')">确定</el-button>
            </div>
        </el-dialog>
  </section>
</template>

<script>
    import {
        isIntegerNotMust
    } from '../../utils/validator'
    import {
        app_menu_list,
        app_menu_add,
        app_menu_edit,
        app_menu_del,
        app_menu_detail
    } from '../../api/app_menu';
export default {
    components: {
        'pic-sel': () => import('../../components/PicSel/index')
    },
  data() {
    return {
        list: null,
        listLoading: true,
        listQuery: {
            page: 1,
            num: 20,
            keyword: undefined,
            status: '',
            menuType: 1,
        },
        status_list: [
            {
                value: 1,
                label: '可用'
            },
            {
                value: 2,
                label: '不可用'
            }
        ],
        ios_list: [
            {
                value: 1,
                label: '显示'
            },
            {
                value: 0,
                label: '隐藏'
            }
        ],
        url_type_list: [
            {
                value: 1,
                label: '--外部链接（淘宝）--'
            },
            {
                value: 2,
                label: '--外部链接（非淘宝）--'
            },
            {
                value: 3,
                label: '--淘宝联盟商品--'
            },
            {
                value: 4,
                label: '--应用内部--'
            }
        ],
        menu_type_list: [
            {
                value: 1,
                label: '底部菜单'
            },
            {
                value: 2,
                label: '代理分销'
            },
            {
                value: 3,
                label: '幕后街'
            },
            {
                value: 4,
                label: '本地生活'
            },
            {
                value: 5,
                label: '本地生活券'
            }
        ],
        url_param_list: [
            {
                value: "home",
                label: '首页'
            },
            {
                value: "seller",
                label: '幕后街'
            },
            {
                value: "local",
                label: '本地生活'
            },
            {
                value: "brand",
                label: '品牌分销'
            },
            {
                value: "vip",
                label: '尊享权益'
            },
            {
                value: "mine",
                label: '我的'
            },
            {
                value: "tb",
                label: '淘宝活动'
            },
            {
                value: "elem1",
                label: '饿了么活动'
            },
            {
                value: "elem2",
                label: '饿了么果蔬生鲜活动'
            },
            {
                value: "jd",
                label: '京东推广'
            },
            {
                value: "pdd1",
                label: '拼多多限时秒杀'
            },
            {
                value: "pdd2",
                label: '拼多多充值中心'
            },
            {
                value: "pdd3",
                label: '拼多多活动转链'
            },
            {
                value: "pdd4",
                label: '拼多多百亿补贴'
            },
            {
                value: "pdd5",
                label: '拼多多领券中心'
            },
            {
                value: "pdd6",
                label: '拼多多火车票'
            },
            {
                value: "meituan",
                label: '美团转链'
            },
            {
                value: "wph",
                label: '唯品会转链'
            },
            {
                value: "haitao",
                label: '考拉海购转链'
            },
            {
                value: "other",
                label: '其他'
            }
        ],
        total: null,
        dialogStatus: '',
        dialogFormVisible: false,
        textMap: {
            update: '编辑菜单',
            create: '新增菜单'
        },
        form: {
            id: undefined,
            menuType: 1,
            name: undefined,
            iconUrl: undefined,
            iconSurl: undefined,
            iconHurl: undefined,
            status: 1,
            orderid: 0,
            fontColor: undefined,
            fontColorAct: undefined,
            urlType: 4,
            url: undefined,
            urlParam: undefined,
            showIos: 1,
        },
        rules: {
            name: [
                {
                    required: true,
                    message: '请输入菜单名称',
                    trigger: 'blur'
                }
            ],
            iconUrl: [
                {
                    required: true,
                    message: '请选择默认图片',
                    trigger: 'blur'
                }
            ],
            orderid: [
                {
                    validator: isIntegerNotMust,
                    trigger: 'blur'
                }
            ]
        },
    }
  },
  mounted() {
  },
  created() {
    this.getList();
  },

  methods: {
    getList() {
        this.listLoading = true;
        app_menu_list(this.listQuery).then(response => {
            this.list = response.data.list;
            this.total = response.data.total;
            this.listLoading = false;
        })
    },
    handleCreate() {
        this.resetTemp();
        this.dialogStatus = 'create';
        this.dialogFormVisible = true;
    },
    resetTemp() {
        this.form = {
            name: undefined,
            id: undefined,
            menuType: 1,
            iconUrl: undefined,
            iconSurl: undefined,
            iconHurl: undefined,
            status: 1,
            orderid: 0,
            fontColor: undefined,
            fontColorAct: undefined,
            urlType: 4,
            url: undefined,
            urlParam: undefined,
            showIos: 1,
        };
    },
    getStatusText(row) {
        if(row.status === 1) {
            return "可用"
        }

        return "不可用"
    },
    getStatusColor(row) {
        if(row.status === 1) {
            return "success"
        }

        return "danger"
    },
    create(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
            if (valid) {
                if(!this.form.orderNum) {
                    this.form.orderNum = 0;
                }
                app_menu_add(this.form)
                    .then(() => {
                        this.dialogFormVisible = false;
                        this.getList();
                        this.$message.success("菜单创建成功");
                    })
            } else {
                return false;
            }
        });
    },
    update(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
            if (valid) {
                if(!this.form.orderNum) {
                    this.form.orderNum = 0;
                }
                this.dialogFormVisible = false;
                this.form.password = undefined;
                app_menu_edit(this.form.id, this.form).then(() => {
                    this.dialogFormVisible = false;
                    this.getList();
                    this.$message.success("菜单更新成功");
                });
            } else {
                return false;
            }
        });
    },
    cancel(formName) {
        this.dialogFormVisible = false;
        this.$refs[formName].resetFields();
    },
    handleUpdate(row) {
        app_menu_detail(row.id)
            .then(response => {
                this.form = response.data;
                if(!this.form.urlType) {
                    this.form.urlType = undefined;
                }
                if(!this.form.urlParam) {
                    this.form.urlParam = undefined;
                }
                this.dialogFormVisible = true;
                this.dialogStatus = 'update';
            });
    },
    handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                app_menu_del(row.id)
                    .then(() => {
                        this.$message.success("菜单删除成功");
                        const index = this.list.indexOf(row);
                        this.list.splice(index, 1);
                    });
            }).catch(()=>{});
    },
    dialogClose() {
        this.$refs.form.resetFields();
    },
    handleFilter() {
        this.getList();
    },
    handleSizeChange(val) {
        this.listQuery.num = val;
        this.getList();
    },
    handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
    }
  }
};
</script>
